import React from 'react';

import Form from 'antd/lib/form';
import 'antd/lib/form/style';
import Input from 'antd/lib/input';
import 'antd/lib/input/style';
import Button from 'antd/lib/button';
import 'antd/lib/button/style';
import Row from 'antd/lib/row';
import 'antd/lib/row/style';
import Col from 'antd/lib/col';
import 'antd/lib/col/style';
import Cascader from 'antd/lib/cascader';
import 'antd/lib/cascader/style';
import Checkbox from 'antd/lib/checkbox';
import { EMAIL_REGEX } from '../config';
const FormItem = Form.Item;
const createForm = Form.create;

const styles = {
    form: {
    },
    input: {
        backgroundColor: "rgba(255, 255, 255, 0.3",
    },
    label: {
        textAlign: "center",
        fontSize: "1.5rem",
        color: "#858585"
    },
    button: {
        marginLeft: "1rem",
        marginRight: "1rem",
        width: "35%"
    }
};

function illegalChar(str)
{
    var pattern = EMAIL_REGEX;  
    if(pattern.test(str)){  
        return false;     
    }     
    return true;  
}

class Reviewer extends React.Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleReset = this.handleReset.bind(this);
        this.state = {
            check:false
        }
    }

    handleSubmit(event) {
        var evn = event || window.event;   
        if (evn.preventDefault) {    
            evn.preventDefault();   
        } else { 
            window.event.returnValue = false;   
        }  
        this.props.form.validateFields((error , values) => {
            if (!!error) {
                return ;
            }
            this.props.handleSubmit(values);
        });
    }

    handleReset(e) {
        e.preventDefault();
        this.setState({check:false});
        this.props.form.resetFields();
    }

    onAgreement(rule, value, callback) {
        if (value === true) {
            callback();
        } else {
            callback([new Error("请同意并接受我们的服务条款")]);
        }
    }

    charCheck(rule, value, callback) {
        if( value != undefined && value.length != 0 ){
            if (illegalChar(value)) {
                callback();
            } else {
                callback([new Error("包含非法字符")]);    
            }
        } else {
            callback();
        }
    }

    render() {
        const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
        const emailProps = getFieldProps('email', {
            validate: [{
                rules: [
                    { required: true, message: '请输入邮箱地址' },
                ],
                trigger: 'onBlur',
            }, {
                    rules: [
                        { type: 'email', message: '请输入正确的邮箱地址' },
                    ],
                    trigger: ['onBlur', 'onChange'],
                }],
        });
        const nameProps = getFieldProps('name', {
            rules: [
                { required: true, whitespace: true, message: '请填写真实姓名' },
                { validator: this.charCheck },  
            ],
        });
        const agreementProps = getFieldProps('agreement', {
            rules: [
                { validator: this.onAgreement },
            ],
        });

        return (
            <Form horizontal onSubmit={this.handleSubmit} style={styles.form}>
                <FormItem
                    >
                    <Input {...emailProps} placeholder="公司邮箱" style={styles.input}/>
                </FormItem>
                <FormItem
                    >
                    <Input {...nameProps} placeholder="真实姓名" style={styles.input}/>
                </FormItem>
                <FormItem>
                    <Checkbox {...agreementProps} checked={this.state.check} onClick={()=>{this.setState({check:!this.state.check})}}>同意</Checkbox><a onClick={this.props.showLegal}>服务规约</a>
                </FormItem>
                <Row>
                    <Col span={12} style={{ textAlign: 'center' }}>
                        <Button style={{width:"95%",marginRight:"5%"}} type="primary" htmlType="submit">注册</Button>
                    </Col>
                    <Col span={12} style={{ textAlign: 'center' }}>
                        <Button style={{width:"95%",marginLeft:"5%"}} onClick={this.handleReset}>重置</Button>
                    </Col>
                </Row>
            </Form>
        );
    }
}

Reviewer = createForm()(Reviewer);

export default Reviewer;